<html>
<script type="text/javascript">
function ClearFile(path,clear,type){       //用于清楚
    
    $("#reset"+type).show();
    $("#preview_wrapper"+type).hide();
    
    var fileInput = $("#"+path+type);
    var clearBut = $("#"+clear+type);
    var upBut = $("#bt_"+type);
        var tempWrapper = $("<form><\/form>");
        $("body").append(tempWrapper);
        tempWrapper.append(fileInput);
        tempWrapper.get(0).reset();
        fileInput.insertBefore(clearBut);
        tempWrapper.remove();
}
function setFileName(path,clear,sender,type){
    var imageName = getFileName(path+type);
    var extName = getFileExtName(path+type);

    var extNameLow = extName.toLowerCase();
    if("gif jpg jpeg bmp png".indexOf(extNameLow) == -1){
         ClearFile(path,clear,type);
         alert("上传的图片类型仅限为gif、jpg、jpeg、bmp、png！");
         return false;
    }
    onUploadImgChange(path,sender,type);
    return true;
}


//立即提取需要上传文件的扩展名
function getFileExtName(imagePathId){
    var imagePath = document.getElementById(imagePathId);
    var path = imagePath.value;
    if(path==""){
        return "";
    }
    var extNames = path.split(".");
    return extNames[extNames.length-1];
}
//获得本地图片文件名
function getFileName(imagePathId){
    var imagePath = document.getElementById(imagePathId);
    var path = imagePath.value;
    if(path==""){
        return "";
    }
    var names = path.split("\\");
    var nameAll = names[names.length - 1];
    var name = nameAll.split(".");    
    return name[0];
}

function onUploadImgChange(imagePathId,sender,num){
    
    document.getElementById( 'reset'+num ).style.display = 'none';
    document.getElementById( 'preview_wrapper'+num ).style.display = '';
    
    var objPreview = document.getElementById('galleryImg'+num);  
    var objPreviewFake = document.getElementById( 'preview_fake'+num );  
    var objPreviewSizeFake = document.getElementById( 'preview_size_fake'+num );  
 if( sender.files && sender.files[0] ){
    objPreview.style.display = 'block';
    objPreview.style.width = 'auto';
    objPreview.style.height = 'auto';

    // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
//    try{
        if(typeof sender.files[0].getAsDataURL == 'function')                              //firefox7前版本用
            objPreview.src = sender.files[0].getAsDataURL();
        else{                                                                                                                //firefox7及后版本用
            oFReader.onload = function (oFREvent) {
                objPreview.src = oFREvent.target.result;
                
            };
            var oFile = document.getElementById(imagePathId+num).files[0];
            oFReader.readAsDataURL(oFile);
        }
//    }catch(e){
//        return false;
//   }
}else if( objPreviewFake.filters ){                                                                     //ie用
    // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
    //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

    // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
    sender.select();
    var imgSrc = document.selection.createRange().text;
   try{
        objPreviewFake.filters.item(
        'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
        objPreviewSizeFake.filters.item(
        'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
   }catch(e){
         return false;
   }
    autoSizePreview( objPreviewFake,
    objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight,num );
    objPreview.style.display = 'none';
    }
    return true;
}

function onPreviewLoad(sender,num){
    autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight,num);
}

function autoSizePreview( objPre, originalWidth, originalHeight,num ){
    var zoomParam = clacImgZoomParam( 100, 100, 100, 100 );
//     if(num=='_small')zoomParam = clacImgZoomParam( 70, 70, 70, 70 );
    objPre.style.width = zoomParam.width + 'px';
    objPre.style.height = zoomParam.height + 'px';
    objPre.style.marginTop = zoomParam.top + 'px';
    objPre.style.marginLeft = zoomParam.left + 'px';
}

function clacImgZoomParam( maxWidth, maxHeight, width, height ){
    var param = { width:width, height:height, top:0, left:0 };

    if( width>maxWidth || height>maxHeight ){
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;

        if( rateWidth > rateHeight ){
            param.width = maxWidth;
            param.height = height / rateWidth;
        }else{
            param.width = width / rateHeight;
            param.height = maxHeight;
        }
    }

    param.left = (maxWidth - param.width) / 2;
    param.top = (maxHeight - param.height) / 2;

    return param;
}
var oFReader;
try{
    oFReader = new FileReader();            //firefox7及后版本用
}catch(e){
    

}
</script>


界面用于上传部分

 <div>
                                                                <img id="reset_big" src="images/zanque.gif" width="100px" height="100px" style="display:none" />   //  原图
                                                                <div id="preview_wrapper_big" class="preview_wrapper_big">
                                                                    <div id="preview_fake_big" class="preview_fake_big"><img src="images/zanque.gif" class="galleryImg_big" id="galleryImg_big" onload="onPreviewLoad(this,'_big')" width="100px" height="100px"/></div>
                                                                </div>
                                                                <img alt="图片预览" id="preview_size_fake_big" class="preview_size_fake_big" style="display: none" width="100px" height="100px"/>
                                                              </div>            
                                                              <input name="myFile" id="imgPath_big" type="file" value="" class="inputFile" size="10" onchange="javascript:setFileName('imgPath','clear',this,'_big');"/>                  
                                                              <input id="clear_big" class="button_content" type="button" value="清空" onclick="javascript:ClearFile('imgPath','clear','_big');" />  
                                                              <input id="editapp_bt_big" class="button_content" type="button" value="上传" />       
                                                          <div class="lar" style="width:325px;margin:0px;padding:0px;">          
                                                              <p style="text-align:center;">格式gif、jpg、jpeg、bmp、png,4M大小</p>    
                                                          </div>
                                                      </div>    
</html>